<!DOCTYPE html>
<html>
  <head>
    <title>我的購物車</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <form action="./" method="post">
      <fieldset>
        <legend>個人信息</legend>
        <table>
          <tr>
            <th>隱藏框</th>
            <td>
              <input type="hidden" value="你看不到"/>
            </td>
          </tr>
          <tr>
            <th>個人頭像：</th>
            <td><input type="file"  accept=".png"  /> </td>
          </tr>
          <tr>
            <th>購物帳號：</th>
            <td><input type="text"  autofocus   maxlength="10"  required placeholder="請輸入小於10位數的帳號"   /></td>
          </tr>
          <tr>
            <th>帳號密碼：</th>
            <td>
              <input type="password" value="123456"/>
            </td>
          </tr>
          <tr>
            <th>購物昵稱：</th>
            <td><input type="text"    maxlength="10"  required placeholder="請輸入小於10位數的名字"  autofocus/></td>
          </tr>
          <tr>
            <th>電話：</th>
            <td>
              <input type="text"  maxlength="11" placeholder="最大長度為11位數" pattern="[1]+[3456789]+\d{11}"/>
            </td>
          </tr>
          <tr>
          <tr>
            <th>性別：</th>
            <td>
              <label for="nan">男 </label>
              <input type="radio" name="sex" value="男"   id="nan" />
              <label for="nv"> 女</label>
              <input type="radio" name="sex" value="女" id="nv"/>
            </td>
          </tr>
          <tr>
            <th>出生年月：</th>
            <td>
              <input type="date" />
            </td>
          </tr>
          <th>郵件：</th>
          <td>
            <input type="email" placeholder="請輸入電子郵箱"/>
          </td>
          </tr>
          <tr>
            <th>個性簽名：</th>
            <td><textarea  placeholder="介紹一下自己"></textarea></td>
          </tr>
        </table>
      </fieldset>
      <fieldset>
        <legend>我的購物車</legend>
        <table>
          <tr>
            <th>搜索</th>
            <td>
              <input type="search" />
            </td>
          </tr>
          <tr>
            <th>QCY</th>
            <td>
              <select>
                <option>
                  QCY T13 黑色龍貓 
                </option>
                <option>
                  QCY T13 黑色白熊 
                </option>
                <option>
                  QCY T13 藍色星球
                </option>
              </select>
            </td> 
            <td>
              <label>數量：</label>
              <input type="number" step="1" min="1" max="100"   value="1"/>
              <input type="checkbox"  />
            </td>
          </tr>
          <tr>
            <th>筆記本</th>
            <td>
              <select>
                <option>
                  網格 
                </option>
                <option>
                  橫條 
                </option>

              </select>
            </td> 
            <td>
              <label>數量：</label>
              <input type="number" step="1" min="1" max="100"   value="1"/>
              <input type="checkbox" />
            </td>
          <tr>
            <th>筆</th>
            <td>
              <select>
                <option>
                  鉛筆
                </option>
                <option>
                  鋼筆
                </option>

              </select>
            </td> 
            <td>
              <label>數量：</label>
              <input type="number" step="1" min="1" max="100"   value="1"/>
              <input type="checkbox"/>
            </td>
          </tr>
        </table>
      </fieldset>
      <fieldset>
        <legend>我的收貨地址</legend>
        <table>
          <tr>
            <th>我的收貨地址</th>
            <td>
              <input type="text" list="browsers" name="browser" />
              <datalist id="browsers">
                <option value="小明 17674123121">深圳</option>
                <option value="小紅 17674123122">龍華</option>              
              </datalist>
            </td>
          </tr>
          <tr>
          <tr>
            <th>url</th>
            <td>
              <input type="url" />
            </td>
          </tr>
          <tr>
            <th>顏色</th>
            <td>
              <input type="color" />
            </td>
          </tr>
          <tr>
            <th>範圍</th>
            <td>
              <input type="range" />
            </td>
          </tr>
          <th>提交時間：</th>
          <td>
            <input type="datetime-local" />
          </td>
          </tr>
        </table>

      </fieldset>

      <button type="submit">提交</button>
      <button type="reset">重置</button>
    </form>

  </body>
</html>
